<template>
	<view>
		<view v-if="info.img"><image style="width: 100%;height: auto;" :src="info.img" mode="widthFix"></image></view>
		<view class="content">
			<uni-title type="h3" :title="info.title"></uni-title>
			<view class="fz07rem mt10">{{info.create_time}}　|　{{info.click_um}}人观看</view>
		</view>
		<view class="view-line"></view>
		<view class="content">
			<view v-html="info.content"></view>
		</view>
		<view>
			<cover-image class="mt15" v-for="item in activity" :key="item.id" style="width: 100%;height: auto;" :src="item.banner"></cover-image>
		</view>
		<uni-section title="推荐阅读" type="line" padding>
			<view class="line-clamp1 mt5" v-for="item in recommend" :key="item.id"><uni-link :text="item.title"></uni-link></view>
		</uni-section>
		<uni-section :title="'共'+common.count+'条评论'" type="line" padding>
			<uni-list>
				<uni-list-item v-for="item in common.list" :key="item.id" :title="item.publish_user.name" :note="item.content" :thumb="item.publish_user.head_img" thumb-size="lg">
					<template v-slot:footer>
						<view class="text-right"><uni-icons type="hand-up" size="20"></uni-icons>{{item.likes}}</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-section>
		<view class="fixed-bottom">
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					icon: 'hand-up',
					text: '点赞'
				}, {
					icon: 'star',
					text: '收藏',
				}, {
					icon: 'chat',
					text: '评论',
				}],
				customButtonGroup: [{ icon: 'shop',text: '说点什么', backgroundColor: 'linear-gradient(90deg, #FFD101, #FFD101)', color: '#333' }],
				id:0,
				form:{page:1},
				info:{img:'',title:'',create_time:'',click_um:0,content:''},
				recommend:[],
				activity:[],
				common:{list:[],count:0,num:10,page:1},
			}
		},
		onLoad(options){
			this.id = options.id
			this.onGetInfo()
			this.onGetCommon()
			this.onGetActivity()
		},
		methods: {
			onGetInfo(){
				let _this = this
				this.$request('/api2/wiki_info/'+_this.id,'GET').then(res => {
					res.data.content = res.data.content.replace(/\<img/gi, '<img style="width:100%;height:auto"');
					_this.info = res.data
					_this.onGetRecommend()
				}).catch(err => {
					console.log(err)
				})
			},
			onGetRecommend(){
				let _this = this
				this.$request('/api2/wiki_search','POST',{page: 1,title: _this.info.title}).then(res => {
					_this.recommend = res.data.list
				}).catch(err => {
					console.log(err)
				})
			},
			onGetActivity(){
				let _this = this
				this.$request_api('applet_api/activity','GET').then(res => {
					_this.activity = res.data
				}).catch(err => {
					console.log(err)
				})
				
			},
			onGetCommon(){
				let _this = this
				_this.form.id = _this.id
				this.$request('/api2/wiki_common_list','POST',_this.form).then(res => {
					_this.common = res.data
					_this.common.count = res.data.list.length
				}).catch(err => {
					console.log(err)
				})
			},
			onClickItem(e){
				this.current = e.currentIndex
			},
			onClickBaike(e){
				console.log(e)
			}
		}
	}
</script>

<style scoped lang="scss">
.content{padding: 15px 15px 15px 15px;}
</style>
